<template>
    <Teleport to="body">
        <transition name="el-fade-in">
            <div class="pay-choose-dialog" v-if="visible">
                <div class="pay-choose-dialog__mask"></div>
                <div class="pay-choose-dialog__content">
                    <div class="pay-choose-dialog__title">
                        选择支付方式
                    </div>

                    <div class="pay-choose-dialog__body">
                        <img :src="_oss_ + 'images/icon-weixin.svg'" @click="onPay(1)" />
                        <img :src="_oss_ + 'images/icon-alipay.svg'" @click="onPay(2)" />
                    </div>
                </div>
            </div>
        </transition>
    </Teleport>
</template>
<script setup>
import { TicketOrderPay } from "~/api";
const visible = ref(false);
const order_no = ref(null);
const pageStore = usePageStore();

const onPay = async (pay_channel) => {
    const res = await TicketOrderPay({
        order_no: order_no.value,
        code: pageStore.code,
        pay_channel,
        redirect_url: "https://www.ykjhr.com",
    });

    if (res.code == 200) {
        if (pay_channel == 1) {
            window.location.href = res.data;
        } else if (pay_channel == 2) {
            alipayForm(res.data.content);
        }
    }
}

defineExpose({
    open(o_no) {
        order_no.value = o_no;
        visible.value = true;
    }
})
</script>
<style lang="scss" scoped>
.pay-choose-dialog {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999;

    &__mask {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: rgba($color: #000000, $alpha: 0.5);
    }

    &__title {
        font-weight: bold;
        font-size: 18px;
        padding-bottom: 20px;
        text-align: center;
    }

    &__content {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 280px;
        background-color: #fff;
        transform: translate(-50%, -50%);
        border-radius: 10px;
        padding: 15px;
    }

    &__body {
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin: 20px 0;

        img {
            width: 60px;
            height: 60px;
        }
    }
}
</style>